<div id="html-template" class="hide">
    <li class="commodity-require-comment">
        <div class="comment-avatar-block"><img class="avatar" src="" alt="用户头像" style="max-width:100%; max-height:100%"/></div>
        <div class="comment-main-block">
            <div class="username">#username#</div>
            <div class="time">#time#</div>
            <div><span class="private"></span><span class="father-comment-username"></span><span class="comment-content">#content#</span></div>
            <a href="javascript:" class="leave-comment-reply-btn">回复</a>
        </div>
        <form class="leave-commodity-require-comment" method="post" style="display: none">
            <div class="form-content" style="overflow: hidden">
                <input type="hidden" name="commodity_require_id">
                <input type="hidden" name="father_id">

                <div class="input-group">
                    <label class="input-group-addon sr-only">回复</label>
                    <textarea name="content" class="form-control reply-textarea" placeholder="请输入回复内容" required="required"></textarea>
                </div>
                <div class="pull-right">
                    <input type="checkbox" name="private" style="vertical-align:-2px"/>
                    <span class="secret-txt">密谈</span>
                    <input type="submit" class="btn btn-primary" value="发表"/>
                </div>
            </div>
        </form>
        <ul class="sub-comment-block"></ul>
    </li>
</div>

<?php /** @var User $thatUser */ ?>
<div id="main">
    <div id="user-center-sidebar-left">
        <?php $this->load->view('home/user-center/sidebar'); ?>
    </div>
    <div id="user-center-body">
        <?php if (isset($CommodityRequireArray)):; ?>
            <?php /** @var CommodityRequire $thisCommodityRequire */ ?>
            <div class="left-right-side">
                <div class="left-side" style="width:390px;">
                    <?php foreach ($CommodityRequireArray as $index => $thisCommodityRequire): ?>
                        <?php /** @var CommodityRequire $thisCommodityRequire */ ?>
                        <?php if (!$thisCommodityRequire) continue; ?>
                        <?php if ($index % 2 == 1) continue; ?>
                        <?php /** @var User $thatUser */ ?>
                        <?php if (!$thatUser = $thisCommodityRequire->getUser()) continue; ?>
                        <div id="commodity-require-<?php echo $thisCommodityRequire->getId() ?>" class="commodity-require" data-commodity-require-id="<?php echo $thisCommodityRequire->getId() ?>">
                            <div>
                                <div style="width: 100%;font-weight: normal;margin-bottom: 6px; padding-bottom:4px;border-bottom: 1px dashed #C1C1C1;">
                                    <span class="text-primary require-name"><a href="#"><?php echo $thisCommodityRequire->getTitle() ?></a></span>
                                </div>

                                <div class="commodity-require-content">
                                    <?php echo $thisCommodityRequire->getContent(); ?>
                                </div>

                                <ul class="nav nav-pills nav-justified nowrap" style="padding-left:30px; margin-bottom:10px; background:none;">
                                    <li class="price"><?php echo $thisCommodityRequire->getMinPrice(); ?> ~ <?php echo $thisCommodityRequire->getMaxPrice(); ?></li>
                                    <li class="contact_qq"><?php echo $thatUser->getDisplayContact(); ?></li>
                                </ul>
                            </div>

                            <div class="meta" style="width: 388px;background: #faf7e6;border-top: 1px solid #ccc;border-bottom: 1px solid #D6D6D6;color: #333;">
                                <div class="pull-left">
                                    <div class="time"><?php echo $thisCommodityRequire->getReleaseTime(); ?></div>
                                </div>
                                <div class="pull-right" style="position:relative;">
                                    <?php if ($thatUser->getId() == $CurrentUser->getId()): ?>
                                    <a href="javascript:" class="edit-require" data-commodity-id="<?php echo $thisCommodityRequire->getId() ?>"><span class="glyphicon glyphicon-edit"></span>&nbsp;编辑</a>
                                    <a href="javascript:" class="delete-require" data-commodity-id="<?php echo $thisCommodityRequire->getId() ?>"><span class="glyphicon glyphicon-trash"></span>&nbsp;删除</a>
                                    <?php endif;?>
                                    <a href="javascript:" class="show-comment" data-commodity-require-id="<?php echo $thisCommodityRequire->getId() ?>"><span class="glyphicon glyphicon-comment"></span>&nbsp;留言(<?php echo $thisCommodityRequire->getCommodityRequireCommentCount() ?>)</a>
                                </div>
                            </div>
                            <div class="comment" style="padding:10px 0 0 0;clear: both;">
                                <div class="leave-comment">
                                    <form class="leave-commodity-require-comment" method="post" data-master-comment-id="0">
                                        <div class="form-content" style="overflow: hidden">
                                            <input type="hidden" name="commodity_require_id" value="<?php echo $thisCommodityRequire->getId() ?>"/>
                                            <input type="hidden" name="father_id" value="0">

                                            <div class="input-group">
                                                <label class="input-group-addon sr-only">回复</label>
                                                <textarea name="content" class="form-control reply-textarea" placeholder="请输入回复内容" required="required"></textarea>
                                            </div>

                                            <div class="pull-right">
                                                <input type="checkbox" name="private" style="vertical-align:-2px"/>
                                                <span class="secret-txt">密谈</span>
                                                <input type="submit" class="btn btn-primary" value="发表"/>
                                            </div>
                                        </div>
                                        <div class="form-progressing" style="margin: 30px auto;display: none;">
                                            <div class="progress progress-striped active">
                                                <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                                                    <span class="sr-only">Progressing</span>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <ul class="list-comment list-unstyled"></ul>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
                <div class="right-side" style="width:390px;">
                    <?php foreach ($CommodityRequireArray as $index => $thisCommodityRequire): ?>
                        <?php /** @var CommodityRequire $thisCommodityRequire */ ?>
                        <?php if (!$thisCommodityRequire) continue; ?>
                        <?php if ($index % 2 == 0) continue; ?>
                        <?php /** @var User $thatUser */ ?>
                        <?php if (!$thatUser = $thisCommodityRequire->getUser()) continue; ?>
                        <div id="commodity-require-<?php echo $thisCommodityRequire->getId() ?>" class="commodity-require">
                            <div>
                                <div style="width: 100%;font-weight: normal;margin-bottom: 6px; padding-bottom:4px;border-bottom: 1px dashed #C1C1C1;">
                                    <span class="text-primary require-name"><a href="#"><?php echo $thisCommodityRequire->getTitle() ?></a></span>
                                </div>

                                <div class="commodity-require-content">
                                    <?php echo $thisCommodityRequire->getContent(); ?>
                                </div>

                                <ul class="nav nav-pills nav-justified nowrap" style="padding-left:30px; margin-bottom:10px; background:none;">
                                    <li class="price"><?php echo $thisCommodityRequire->getMinPrice(); ?> ~ <?php echo $thisCommodityRequire->getMaxPrice(); ?></li>
                                    <li class="contact_qq"><?php echo $thatUser->getDisplayContact(); ?></li>
                                </ul>
                            </div>

                            <div class="meta" style="width: 388px;background: #faf7e6;border-top: 1px solid #ccc;border-bottom: 1px solid #D6D6D6;color: #333;">
                                <div class="pull-left">
                                    <div class="time"><?php echo $thisCommodityRequire->getReleaseTime(); ?></div>
                                </div>
                                <div class="pull-right" style="position:relative;">
                                    <a href="javascript:" class="edit-require" data-commodity-id="<?php echo $thisCommodityRequire->getId() ?>"><span class="glyphicon glyphicon-edit"></span>&nbsp;编辑</a>
                                    <a href="javascript:" class="delete-require" data-commodity-id="<?php echo $thisCommodityRequire->getId() ?>"><span class="glyphicon glyphicon-trash"></span>&nbsp;删除</a>
                                    <a href="javascript:" class="show-comment" data-commodity-require-id="<?php echo $thisCommodityRequire->getId() ?>"><span class="glyphicon glyphicon-comment"></span>&nbsp;留言(<?php echo $thisCommodityRequire->getCommodityRequireCommentCount() ?>)</a>
                                </div>
                            </div>

                            <div class="comment" style="padding:10px 0 0 0;clear: both;">
                                <div class="leave-comment">
                                    <form class="leave-commodity-require-comment" method="post" data-master-comment-id="0">
                                        <div class="form-content" style="overflow: hidden">
                                            <input type="hidden" name="commodity_require_id" value="<?php echo $thisCommodityRequire->getId() ?>"/>
                                            <input type="hidden" name="father_id" value="0">

                                            <div class="input-group">
                                                <label class="input-group-addon sr-only">回复</label>
                                                <textarea name="content" class="form-control reply-textarea" placeholder="请输入回复内容" required="required"></textarea>
                                            </div>

                                            <div class="pull-right">
                                                <input type="checkbox" name="private" style="vertical-align:-2px"/>
                                                <span class="secret-txt">密谈</span>
                                                <input type="submit" class="btn btn-primary" value="发表"/>
                                            </div>
                                        </div>
                                        <div class="form-progressing" style="margin: 30px auto;display: none;">
                                            <div class="progress progress-striped active">
                                                <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                                                    <span class="sr-only">Progressing</span>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <ul class="list-comment list-unstyled"></ul>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        <?php else : ?>
            <div>
                <h1 class="alert alert-success text-center">Sorry，暂时没有您要的信息！<a class="changeschool" href="###">去其他学校看看</a></h1>
            </div>
        <?php endif ?>
        <div id="pagination">
            <?php if (isset($Pagination)) echo $Pagination; ?>
        </div>
    </div>
</div>
<script>
    function appendCommodityRequireComment($block, comment, fatherUsername, masterCommentId) {
        var $comment = $('#html-template').find('.commodity-require-comment').clone().addClass('hide').appendTo($block);
        $comment.attr('id', 'commodity-require-comment-' + comment.id);
        $comment.attr('data-comment-id', comment.id);
        $comment.find('.avatar').attr('src', comment.userAvatarUrl);
        $comment.find('.username').html(comment.userDisplayName);
        $comment.find('.time').html(comment.releaseTime);
        $comment.find('.comment-content').html(comment.content);
        $comment.find('form.leave-commodity-require-comment-reply').attr('data-ajax-append-id', masterCommentId);
        var $leaveCommentForm = $comment.find('.leave-commodity-require-comment');
        $leaveCommentForm.attr('data-father-name', comment.userDisplayName);
        $leaveCommentForm.attr('data-master-comment-id', masterCommentId);
        $leaveCommentForm.find('input[name=commodity_require_id]').val(comment.commodityRequireId);
        $leaveCommentForm.find('input[name=father_id]').val(comment.id);
        if (comment.private == true)
            $comment.find('.private').html('[密谈]');
        if (fatherUsername)
            $comment.find('.father-comment-username').html('@' + fatherUsername);
        $comment.removeClass('hide');
        return $comment;
    }

    function hideAllLeaveCommentForm() {
        $('form.leave-commodity-require-comment[data-master-comment-id!=0]').slideUp();
    }

    function appendCommodityRequireCommentByCommentSet(commentSet) {
        var commodityRequireId = commentSet.commodityRequireId;
        var $commentList = $('#commodity-require-' + commodityRequireId).find('.list-comment');
        commentSet.masterCommentIdArraySortByReleaseTime.forEach(function (commentId) {
            var comment = commentSet.comments[commentId];
            if (comment) {
                var $comment = appendCommodityRequireComment($commentList, comment, undefined, comment.id);
                var $subCommentBlock = $comment.find('.sub-comment-block');
                comment.descendantCommentIdArraySortByReleaseTime.forEach(function (subCommentId) {
                    var subComment = commentSet.comments[subCommentId];
                    appendCommodityRequireComment($subCommentBlock, subComment, commentSet.comments[subComment.fatherId] ? commentSet.comments[subComment.fatherId].userDisplayName : undefined, comment.id);
                });
            }
        });
    }

    function appendCommodityRequireCommentByCommodityRequireId(commodity_require_id) {
        CommodityRequireCommentSet.InitByCommodityRequireId(commodity_require_id, appendCommodityRequireCommentByCommentSet);
    }

    $(document).on('submit', 'form.leave-commodity-require-comment', function (event) {
        event.preventDefault();
        var form = this;
        var fatherName = $(form).data('father-name');
        var masterCommentId = $(form).data('master-comment-id');
        $.ajax({
            url: base_url('api/leaveCommodityRequireComment'),
            type: 'post',
            data: $(form).serialize(),
            success: function (jsonrsp) {
                try {
                    var rsp = $.parseJSON(jsonrsp);
                    switch (rsp.type) {
                        case 'success':
                            noty({type: rsp.type, text: rsp.message});
                            var $commentCount = $(form).closest('.commodity-require').find('.comment-count');
                            var commentCount = $commentCount.text();
                            $commentCount.text(+commentCount + +1);
                            $(form).find('[name=content]').val('');
                            var comment = CommodityRequireComment.InitByJsonData(rsp.data);
                            hideAllLeaveCommentForm();
                            if (masterCommentId != 0) {
                                $(form).slideUp();
                                appendCommodityRequireComment($('#commodity-require-comment-' + masterCommentId).children('.sub-comment-block'), comment, fatherName, masterCommentId);
                            }
                            else
                                appendCommodityRequireComment($('#commodity-require-' + comment.commodityRequireId).find('.list-comment'), comment, fatherName, masterCommentId);
                            break;
                        default:
                            noty({type: rsp.type, text: rsp.message});
                            break;
                    }
                } catch (ex) {
                    noty({type: 'error', text: '发生内部错误，请联系管理员'});
                    throw ex;
                }
            }
        });
    });

    $(document).on('click', '.show-comment', function () {
        var commodityRequireId = $(this).data('commodity-require-id');
        var $thisCommodityRequire = $('#commodity-require-' + commodityRequireId);
        var $comment = $thisCommodityRequire.find('.comment');
        var $commentList = $comment.find('.list-comment');
        if ($comment.css('display') == 'none') {
            $commentList.empty();
            $comment.slideDown('fast');
            $(this).css('color', 'rgb(5, 143, 27)');
            appendCommodityRequireCommentByCommodityRequireId(commodityRequireId);
        } else {
            $comment.slideUp('fast');
            $(this).removeAttr('style');
        }
    });

    $(document).on('click', '.leave-comment-reply-btn', function () {
        var commodityRequireId = $(this).closest('.commodity-require').data('commodity-require-id');
        var commentId = $(this).closest('.commodity-require-comment').data('comment-id');
        var $comment = $(this).closest('li#commodity-require-comment-' + commentId);
        var $leaveComment = $comment.children('.leave-commodity-require-comment');
        if ($leaveComment.css('display') == 'none') {
            hideAllLeaveCommentForm();
            $leaveComment.slideDown();
        } else {
            $leaveComment.slideUp();
        }
    });
</script>
